<template>
  <div class="container">
    <div class="banner">
      <Banner :banners="banners"></Banner>
    </div>
    <div class="margin-top">
      <RecommendMusicList
        :recommendMusicList="recommendMusicList"
      ></RecommendMusicList>
    </div>
    <div class="margin-top">
      <Broadcast :broadcastList="broadcastList"></Broadcast>
    </div>
    <div class="margin-top">
      <NewSong :newSongList="newSongList"></NewSong>
    </div>
  </div>
</template>

<script>
//网络请求
import {
  getBanner,
  getRecommendMusicList,
  getBroadcastList,
  getNewSongList,
} from "network/recommend.js";

//引入组件
import Banner from "components/common/banner.vue";
import RecommendMusicList from "./childComponents/recommendMusicList.vue";
import Broadcast from "./childComponents/broadcast.vue";
import NewSong from "./childComponents/newsong.vue";
export default {
  name: "Recommend",
  components: {
    Banner,
    RecommendMusicList,
    Broadcast,
    NewSong,
  },
  data() {
    return {
      banners: [],
      recommendMusicList: [],
      broadcastList: [],
      newSongList: [],
      loadingIsShow: 0,
      loadingInstance: {},
    };
  },
  created() {
    //获取轮播图数据  0:pc
    getBanner(0).then((res) => {
      this.banners = res.data.banners;
      this.loadingIsShow += 1;
    });

    //获取推荐歌单数据 10:数据条数
    getRecommendMusicList(10).then((res) => {
      this.recommendMusicList = res.data.result;
      this.loadingIsShow += 1;
    });

    //获取独家放送数据
    getBroadcastList().then((res) => {
      this.broadcastList = res.data.result;
      this.loadingIsShow += 1;
    });

    //获取最新音乐
    getNewSongList().then((res) => {
      this.newSongList = res.data.result;
      this.loadingIsShow += 1;
    });
  },
  mounted() {
    this.loadingInstance = this.$loading({
      text: "努力加载中...",
      target: document.querySelector(".container"),
    });
  },
  watch: {
    loadingIsShow(newVal) {
      if (newVal === 4) this.loadingInstance.close();
    },
  },
};
</script>

<style lang="less" scoped>
.margin-top {
  margin-top: 15px;
}
</style>
